<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/base :: layout(~{::title}, ~{::content})}">
<head>
    <title th:text="${category.id != null ? '编辑分类' : '新增分类'} + ' - 废物回收管理系统'">编辑分类 - 废物回收管理系统</title>
</head>
<body>
    <div th:fragment="content">
        <!-- 返回按钮和标题 -->
        <div class="d-flex align-items-center mb-4">
            <a href="/categories" class="btn btn-outline-secondary me-3">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h2 class="mb-0" th:text="${category.id != null ? '编辑分类' : '新增分类'}">编辑分类</h2>
        </div>

        <div class="row">
            <!-- 左侧表单 -->
            <div class="col-md-8 mb-4">
                <div class="card">
                    <div class="card-body">
                        <form id="categoryForm" th:action="@{${category.id != null ? '/categories/' + category.id : '/categories'}}" 
                              method="POST" th:object="${category}" class="needs-validation" novalidate 
                              enctype="multipart/form-data">
                            
                            <!-- 基本信息 -->
                            <h5 class="card-title mb-4">基本信息</h5>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="name" class="form-label">垃圾名称 <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name" 
                                           th:value="${category.name}" required maxlength="50">
                                    <div class="invalid-feedback">请输入垃圾名称</div>
                                </div>
                                <div class="col-md-6">
                                    <label for="category" class="form-label">所属分类 <span class="text-danger">*</span></label>
                                    <select class="form-select" id="category" name="category" required>
                                        <option value="">请选择分类</option>
                                        <option value="recyclable" th:selected="${category.category == 'recyclable'}">可回收物</option>
                                        <option value="hazardous" th:selected="${category.category == 'hazardous'}">有害垃圾</option>
                                        <option value="kitchen" th:selected="${category.category == 'kitchen'}">厨余垃圾</option>
                                        <option value="other" th:selected="${category.category == 'other'}">其他垃圾</option>
                                    </select>
                                    <div class="invalid-feedback">请选择所属分类</div>
                                </div>
                                <div class="col-12">
                                    <label for="description" class="form-label">描述 <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="description" name="description" 
                                              rows="3" required maxlength="500" th:text="${category.description}"></textarea>
                                    <div class="invalid-feedback">请输入描述信息</div>
                                </div>
                            </div>

                            <!-- 处理方法 -->
                            <h5 class="card-title mb-3 mt-4">处理方法</h5>
                            <div class="mb-3">
                                <textarea class="form-control" id="disposalMethod" name="disposalMethod" 
                                          rows="3" required maxlength="500" th:text="${category.disposalMethod}"></textarea>
                                <div class="invalid-feedback">请输入处理方法</div>
                            </div>

                            <!-- 注意事项 -->
                            <h5 class="card-title mb-3">注意事项</h5>
                            <div class="mb-3">
                                <textarea class="form-control" id="notice" name="notice" 
                                          rows="3" required maxlength="500" th:text="${category.notice}"></textarea>
                                <div class="invalid-feedback">请输入注意事项</div>
                            </div>

                            <!-- 常见示例 -->
                            <h5 class="card-title mb-3">常见示例</h5>
                            <div class="mb-3">
                                <textarea class="form-control" id="examples" name="examples" 
                                          rows="3" required maxlength="500" th:text="${category.examples}"></textarea>
                                <div class="invalid-feedback">请输入常见示例</div>
                                <div class="form-text">多个示例请用逗号分隔</div>
                            </div>

                            <!-- 状态 -->
                            <h5 class="card-title mb-3">状态</h5>
                            <div class="mb-3">
                                <select class="form-select" id="status" name="status">
                                    <option value="1" th:selected="${category.status == 1}">启用</option>
                                    <option value="0" th:selected="${category.status == 0}">禁用</option>
                                </select>
                            </div>

                            <!-- 提交按钮 -->
                            <div class="mt-4">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>保存
                                </button>
                                <a href="/categories" class="btn btn-outline-secondary ms-2">取消</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 右侧图片上传 -->
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title mb-3">分类图片</h5>
                        <div class="text-center mb-3">
                            <div id="imagePreview" class="position-relative" 
                                 style="width: 100%; height: 200px; overflow: hidden;">
                                <img th:if="${category.imageUrl}" th:src="${category.imageUrl}" 
                                     class="img-fluid" style="width: 100%; height: 100%; object-fit: cover;"
                                     alt="分类图片">
                                <div th:if="${!category.imageUrl}" 
                                     class="d-flex align-items-center justify-content-center bg-light h-100">
                                    <i class="fas fa-image fa-3x text-muted"></i>
                                </div>
                            </div>
                        </div>
                        <div class="d-grid">
                            <label class="btn btn-outline-primary" for="imageFile">
                                <i class="fas fa-upload me-2"></i>上传图片
                            </label>
                            <input type="file" class="d-none" id="imageFile" name="imageFile" 
                                   accept="image/*" onchange="previewImage(this)">
                        </div>
                        <div class="form-text text-center mt-2">
                            支持jpg、png格式，建议尺寸800x600像素
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:fragment="extraScripts">
        <script>
            // 表单验证
            (function() {
                const form = document.getElementById('categoryForm');
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                });
            })();

            // 图片预览
            function previewImage(input) {
                if (input.files && input.files[0]) {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        const preview = document.getElementById('imagePreview');
                        preview.innerHTML = `
                            <img src="${e.target.result}" class="img-fluid" 
                                 style="width: 100%; height: 100%; object-fit: cover;" alt="分类图片">
                        `;
                    }
                    
                    reader.readAsDataURL(input.files[0]);
                }
            }

            // 自动调整文本框高度
            document.querySelectorAll('textarea').forEach(textarea => {
                textarea.addEventListener('input', function() {
                    this.style.height = 'auto';
                    this.style.height = (this.scrollHeight) + 'px';
                });
                
                // 初始化高度
                textarea.dispatchEvent(new Event('input'));
            });
        </script>
    </th:block>
</body>
</html> 